<template>
	<view>
		<head></head>
		<view class="headimg">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
				<swiper-item>
					<view class="swiper-item">
						<img src="../../static/indexheadimg/headimg1.jpg" alt="" style=" position: absolute;
							left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%;
							width: auto; height: auto; max-width: none; " />
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<img src="../../static/indexheadimg/headimg2.jpg" alt="" style=" position: absolute;
								left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%;
								width: auto; height: auto; max-width: none; " />
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<img src="../../static/indexheadimg/headimg3.jpg" alt="" style=" position: absolute;
								left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%;
								width: auto; height: auto; max-width: none; " />
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
	<view class="middle">
		<scroll-view scroll-x style="white-space: nowrap; width: 100%;" :show-scrollbar="false">
			<wen :src="wuqi" :text="wuqit" style="display: inline-block; width: 190rpx; " @click="tolist(0)" />
			<wen :src="ci" :text="cit" style="display: inline-block; width: 200rpx; " @click="tolist(1)" />
			<wen :src="qianbi" :text="qianbit" style="display: inline-block; width: 190rpx; " @click="tolist(2)" />
			<wen :src="yu" :text="yut" style="display: inline-block; width: 200rpx;"  @click="tolist(3)" />
			<wen :src="jiajv" :text="jiajvt" style="display: inline-block; width: 190rpx; " @click="tolist(4)" />
			<wen :src="shanben" :text="shanbent" style="display: inline-block; width: 200rpx; " @click="tolist(5)" />
			<wen :src="xiyin" :text="xiyint" style="display: inline-block; width: 190rpx; " @click="tolist(6)" />
			<wen :src="zhixiu " :text="zhixiut" style="display: inline-block; width: 200rpx;" @click="tolist(7)" />
			<wen :src="zaxiang " :text="zaxiangt" style="display: inline-block; width: 200rpx;" @click="tolist(8)" />
		</scroll-view>


	</view>
	<view class="con">
		<content></content>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import wen from '../../components/wen.vue'; // Correct file extension
	import head from '../../components/head.vue'
	import content from '../../components/content.vue'
	import bottom from '../../components/bottom.vue'
	const wuqi = ref('@/static/indexicon/wuqi.png')
	const wuqit = ref("武器")
	const ci = ref('@/static/indexicon/ci.png')
	const cit = ref("瓷器")
	const qianbi = ref('@/static/indexicon/qianbi.png');
	const qianbit = ref("钱币")
	const yu = ref('@/static/indexicon/yu.png')
	const yut = ref("玉器")

	const jiajv = ref('@/static/indexicon/jiajv.png')
	const jiajvt = ref("家具")
	const shanben = ref('@/static/indexicon/shanben.png')
	const shanbent = ref("善本")
	const xiyin = ref('@/static/indexicon/xiyin.png');
	const xiyint = ref("玺印")
	const zhixiu = ref('@/static/indexicon/zhixiu.png')
	const zhixiut = ref("织绣")
	const zaxiang = ref('@/static/indexicon/zaxiang.png')
	const zaxiangt = ref("杂项")


	const textContent = ref('Your text here'); // Example text content

	// 正确写法（使用模板字符串）
	function tolist(num) {
	  uni.navigateTo({
	    url: `/pages/index/list?index=${num}`
	  })
	}

</script>

<style scoped>
	.middle {
		display: flex;
		justify-content: space-around;
		margin-bottom: 12px;
	}

	.headimg {
		height: 153px;
		margin-bottom: 25px;
	}

	img {
		width: 100%;
		height: 100%;
	}
</style>